// 验证方式
var UserData = [
  {
    explain: '密码登录',
    phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
    nameReg: /^[a-zA-Z0-9_-]{4,16}$/,
    emailReg:
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
    passwordReg: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[a-z])\S*$/, //密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
    nullMsg: '请输入用户名和密码',
    errorMsg: '为了保证您的安全,请使用短信验证码登录',
    flag: false,
  },
  {
    explain: '验证码登录',
    phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
    codeReg: /^[0-9]{6}$/i,
    nullMsg: '请输入正确的手机号',
    errorMsg: '请输入六位数字验证码',
    error: '请获取验证码',
    flag: false,
  },
]
//切换登录
function userClick() {
  let btn1 = document.querySelector('#pa')
  let btn2 = document.querySelector('#me')
  let password = document.querySelector('#password')
  let message = document.querySelector('#message')
  let erweima = document.querySelector('.erweima')
  let saoma = document.querySelector('#saoma')
  let dangdang = document.querySelector('#dangdang')
  let goLogin = document.querySelector('.goLogin')
  let startRegister = document.querySelector('.startRegister')
  let zhuce = document.querySelector('#zhuce')
  let black = document.querySelector('.black')
  let other = document.querySelector('.other')
  let loginBtn = document.querySelector('.loginBtn')
  let inp = password.querySelectorAll('input')
  let inp2 = message.querySelectorAll('input')
  let inp3 = zhuce.querySelectorAll('input')
  let errorDiv = document.querySelector('.error')
  let errorDiv2 = zhuce.querySelector('.error')
  let btnRes = document.querySelector('.btnRes')
  //密码登录
  btn1.onclick = function () {
    btn2.classList.remove('fw')
    this.classList.add('fw')
    password.style.display = 'block'
    message.style.display = 'none'
  }
  //验证码登录
  btn2.onclick = function () {
    errorDiv.style.display = 'none'
    btn1.classList.remove('fw')
    this.classList.add('fw')
    password.style.display = 'none'
    message.style.display = 'block'
  }
  //扫码登录
  erweima.onclick = function () {
    dangdang.style.display = 'none'
    saoma.style.display = 'block'
  }
  //正常登录
  goLogin.onclick = function () {
    saoma.style.display = 'none'
    dangdang.style.display = 'block'
  }
  //立即注册
  startRegister.onclick = function () {
    zhuce.style.display = 'block'
    other.style.display = 'none'
    dangdang.style.display = 'none'
  }
  //返回登录
  black.onclick = function () {
    zhuce.style.display = 'none'
    dangdang.style.display = 'block'
    other.style.display = 'block'
  }
  let verification = document.querySelectorAll('.verification')

  //点击获取验证码
  verification.forEach(ele => {
    ele.addEventListener('click', verFn)
  })
  function verFn() {
    powe = true
    this.disabled = true
    let i = 60
    this.innerHTML = `${i}S后重新发送`
    let timer = setInterval(() => {
      this.innerHTML = `${--i}S后重新发送`
      if (i === 0) {
        clearInterval(timer)
        this.innerHTML = `发送验证码`
        this.disabled = false
      }
    }, 1000)
  }
  //点击登录
  let powe = false
  loginBtn.addEventListener('click', loginFn)
  function loginFn(e) {
    //判断在哪个页面
    if (
      e.target.parentNode.children[2].children[0].style.display === '' ||
      e.target.parentNode.children[2].children[0].style.display === 'block'
    ) {
      //判断是否为空
      if (inp[0].value === '' || inp[1].value === '') {
        errorDiv.style.display = 'block'
        errorDiv.innerHTML = `${UserData[0].nullMsg}`
      }
      //判断满足一个
      if (
        UserData[0].phoneReg.test(inp[0].value) ||
        UserData[0].nameReg.test(inp[0].value) ||
        UserData[0].emailReg.test(inp[0].value)
      ) {
        if (UserData[0].passwordReg.test(inp[1].value)) {
          errorDiv.style.display = 'block'
          errorDiv.innerHTML = `${UserData[0].errorMsg}`
        }
      }
    } else {
      //判断手机号是否为空
      if (inp2[0].value === '' || inp2[1].value === '') {
        errorDiv.style.display = 'block'
        errorDiv.innerHTML = `${UserData[1].nullMsg}`
      }
      //判断
      if (UserData[1].phoneReg.test(inp2[0].value)) {
        if (powe) {
          //验证码判断
          if (UserData[1].codeReg.test(inp2[1].value)) {
            errorDiv.style.display = 'block'
            //拼图验证
            let slideBar = document.querySelector('#slideBar')
            let mark = document.querySelector('.mark')
            slideBar.style.display = 'block'
            mark.style.display = 'block'
            var dataList = ['0', '1']
            var options = {
              dataList: dataList,
              success: function () {
                setTimeout(() => {
                  slideBar.style.display = 'none'
                  mark.style.display = 'none'
                }, 1000)
                ajax({
                  url: '../server/login.php',
                  type: 'post',
                  data: {
                    username: inp2[0].value,
                  },
                  success(res) {
                    errorDiv.style.display = 'none'
                    let obj = JSON.parse(res)
                    if (!obj.state) {
                      alert('登录成功')
                      // 跳转到首页
                      location.assign(
                        'http://localhost/Dangdangshopping/index.html'
                      )
                      // 把登录状态存上 token
                      localStorage.setItem('token', obj.token)
                      // 用户信息带到另一个页面
                      localStorage.setItem('user', inp2[0].value)
                    }
                  },
                })
              },
              fail: function () {
                alert('登录失败')
              },
            }

            SliderBar('slideBar', options)
          } else {
            errorDiv.style.display = 'block'
            errorDiv.innerHTML = `${UserData[1].errorMsg}`
          }
        } else {
          errorDiv.style.display = 'block'
          errorDiv.innerHTML = `${UserData[1].error}`
        }
      }
    }
  }
  //点击注册
  btnRes.addEventListener('click', resFn)
  function resFn(e) {
    if (inp3[0].value === '' || inp3[1].value === '') {
      errorDiv2.style.display = 'block'
      errorDiv2.innerHTML = `${UserData[1].nullMsg}`
    }
    //判断
    if (UserData[1].phoneReg.test(inp3[0].value)) {
      if (powe) {
        //验证码判断
        if (UserData[1].codeReg.test(inp3[1].value)) {
          errorDiv2.style.display = 'none'
          ajax({
            url: '../server/register.php',
            type: 'post',
            data: {
              username: inp3[0].value,
            },
            success(res) {
              let obj = JSON.parse(res)
              if (obj.state) {
                alert('注册成功')
                // 跳转到首页
                location.assign('http://localhost/Dangdangshopping/index.html')
                // 把登录状态存上 token
                localStorage.setItem('token', obj.token)
                // 用户信息带到另一个页面
                localStorage.setItem('user', inp3[0].value)
              } else {
                alert(obj.message)
              }
            },
          })
        } else {
          errorDiv2.style.display = 'block'
          errorDiv2.innerHTML = `${UserData[1].errorMsg}`
        }
      } else {
        errorDiv2.innerHTML = `${UserData[1].error}`
      }
    }
  }
}
//登录效果
function loginVerify() {
  let flag = true
  let inputs = document.querySelectorAll('.inputs div input')
  let size = document.querySelectorAll('.size')
  let eye = document.querySelector('.eye')
  let lab = document.querySelectorAll('label')

  //输入框样式
  function loginStyle(inClick) {
    inClick.forEach((ele, index) => {
      ele.onclick = () => {
        size[index].style.fontSize = '12px'
        size[index].style.top = '4px'
        inputs[index].focus()
      }
      ele.onkeydown = e => {
        if (e.keyCode === 9) {
          size[index + 1].style.fontSize = '12px'
          size[index + 1].style.top = '4px'
        }
      }
      ele.onblur = function () {
        size[index].style.fontSize = '15px'
        size[index].style.top = '16px'
        if (this.value !== '') {
          size[index].style.fontSize = '12px'
          size[index].style.top = '4px'
        }
      }
    })
  }
  loginStyle(inputs)
  loginStyle(lab)

  //显示隐藏密码
  eye.onclick = function () {
    if (flag) {
      this.previousElementSibling.type = 'password'
      this.classList.add('icon-mimabukejian')
      this.classList.remove('icon-browse')
    } else {
      this.previousElementSibling.type = 'text'
      this.classList.add('icon-browse')
      this.classList.remove('icon-mimabukejian')
    }
    flag = !flag
  }
}

loginVerify()
userClick()
